import React, { Component } from 'react';
// import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as actions from '../actions/index';
import ListLoading from 'atComponents/ListLoading';
import ListEmpty from 'atComponents/ListEmpty';
import CommitInfoMedia from 'components/commitInfoMedia';
import List from '@txdfe/at-list';
import PropTypes from 'prop-types';
import { defaultPageSize } from 'utils/constants.js';
import {
  changeMrTabKey,
  getMergeRequest,
} from 'pages/index/pages/project/pages/projectMergeRequestDetail/actions';
import { enterPage } from 'utils/track';
import { postDrafts } from 'pages/index/pages/project/pages/projectMergeRequestDetail/pages/changes/actions';
import intl from '../../../../../../../../../locale';

class Root extends Component {
  static propTypes = {
    currentPage: PropTypes.number,
    total: PropTypes.number,
    summaryLogsLoaded: PropTypes.bool,
  };

  static defaultProps = {
    currentPage: 1,
    total: 0,
    summaryLogsLoaded: false,
  };

  componentDidMount() {
    this.props.changeMrTabKey('commits');
    this.props.getLogs(this.props.currentPage);

    const { codeReviewDetail } = this.props;
    enterPage('Repo-MR-commits', {
      mr_id: codeReviewDetail.id,
    });
  }

  componentWillUnmount() {
    this.props.resetLogs();
  }

  render() {
    const { summaryLogs, summaryLogsLoaded, currentPage, total } = this.props;
    if (!summaryLogs) {
      return <ListLoading />;
    }
    const hasMore = currentPage * defaultPageSize < total;
    return (
      <div className="logs-wrapper">
        {summaryLogsLoaded ? (
          <>
            {summaryLogs.length === 0 ? (
              <ListEmpty
                image="none"
                content={intl.get({
                  id: 'code-assets.commits.containers.root.NoSubmissionRecords',
                  defaultMessage: '暂无提交记录',
                })}
              />
            ) : (
              <List
                pagination={{
                  onLoadMore: (page) => {
                    this.props.getLogs(page);
                  },
                  hasMore,
                  useWindow: false,
                  getScrollParent: () => {
                    return document.querySelector('#container .mr-detail-content-body');
                  },
                }}
                className="mr-commits-list"
              >
                {summaryLogs.map((commitItem) => (
                  <CommitInfoMedia
                    commitInfo={commitItem}
                    // useForList
                    noCover
                    isSrcBtnShow
                    key={commitItem.id}
                    trackPage="Repo-MR-Commit"
                  />
                ))}
              </List>
            )}
          </>
        ) : (
          <ListLoading />
        )}
      </div>
    );
  }
}

export default connect(
  (state) => {
    const { root, commitsReducer, changesReducer } = state.project.projectMergeRequestDetail;
    return { ...root, ...commitsReducer, changesReducer };
  },
  (dispatch) =>
    bindActionCreators({ ...actions, changeMrTabKey, getMergeRequest, postDrafts }, dispatch),
)(Root);
